<template>
  <div>
    <div v-show="show" class="paddingT10 relative">
      <Input v-model="inp" style="width:400px;" class="pullLeft marginR30 "
        placeholder="请输入关键词，按回车键搜索"
        @on-enter="inputDd"
      >
        <Select v-model="optZ" slot="prepend" style="width: 100px" @on-change="inputDF" >
          <Option v-for="(val,i) in optS" :key="i" :value="val.key">{{val.val}}</Option>
        </Select>
      </Input>
      
      <div class="pullLeft">
        日期范围：
        <DatePicker
          :editable="false"
          type="date"
          v-model="dateStart"
          placeholder="不限"
          :options="optMax"
          style="width: 150px"
          @on-change="ondStart"
        ></DatePicker>
        -
        <DatePicker
          :editable="false"
          type="date"
          v-model="dateEnd"
          style="width: 150px"
          :options="optMax"
          class=""
          :clearable="false"
          @on-change="ondEndJ"
        ></DatePicker>
      </div>
      <div class="pullRight">
        <Button type="primary" ghost  @click="chongZ" shape="circle" size="small" class="relative " style="top:5px;">
          <Icon type="md-refresh"  size="16"/>
          重 置
        </Button>
        <!-- <Button type="primary"  @click="goSs">
          <Icon type="ios-search"  size="16"/>
          搜 索
        </Button> -->
      </div>
      <div class="clearBoth"></div>

      <div class="paddingT10" v-show="order_type!=0 && order_type!=5" style="padding-right:50px; margin-bottom:-10px;">
        <CheckboxGroup v-model="fruit" class="inlineBlock marginR20" @on-change="inputDd">
          <Checkbox v-for="(val,i) in sA" :key="i" :label="val.key"  class="marginB10">{{val.val}}</Checkbox>
          <div class="inlineBlock relative" style="left:15px;">
            <Button
              type="primary"
              ghost
              class="marginR10"
              shape="circle"
              size="small"
              @click="dZt(order_type,false)"
            >清 空</Button>
            <Button type="primary" shape="circle" size="small" @click="dZt(order_type,true)">全选</Button>
          </div>
          
        </CheckboxGroup>
        
      </div>

     

    </div>
  </div>
</template>


<script>
import orderZtArray from "@$@/js/$common/orderZtArray";
export default {
  name: "SX",
  data() {

    let data = {
      inp: "",

      dateStart: "",
      dateEnd: $app.today(true),
      optZ: "",
      optS: [],

      optMax: {
        disabledDate(date) {
          let out = date && date.valueOf() > Date.now();
          return out;
        }
      }
    };

    // 状态多选
    let sXx = {
      sA: [],//多选框内容 数组
      fruit: []//多选框，选中的内容
    };
    let tool={};
    return Object.assign(data, sXx,tool);
  },
  props: ["show","order_type"],
  created() {},
  mounted() {
    let { order_type: i } = this;
    this.iitmP(i, false);//多状态 渲染出来
  },
  methods: {
    //输入框 , 付款状态切换
    inputDd(){
      this.$emit('pageTo1');
      this.$nextTick(() => {
        this.$emit('goFun');//调用父组件的方法
      });
    },
    //配合上者使用
    inputDF(e){
      console.log('e = ',e)
      let {inp}=this;
      let text=$app.delSpace(inp);
      if($app.judgeData(text)){
        this.inputDd();
      }else{
        console.log('输入框没值 不触发，搜索')
      }
    },
    //多选列表渲染,buEr true全选，false全不选
    dZt(i, buEr) {
      this.iitmP(i, buEr);
      this.inputDd();
    },
    //多选列表渲染,buEr true全选，false全不选
    iitmP(i, buEr) {
      this.sA = orderZtArray.orderZtArray[i];

      if (i != 0 && !!buEr) {
        let Tarr = [];
        this.sA.forEach((val, i) => {
          Tarr.push(val.key);
        });
        this.fruit = Tarr;
      } else {
        this.fruit = []; //全部清空
      }
    },
    //重置
    chongZ() {
      let { order_type: i } = this;
      this.inp = ""; //文字清空
      this.dZt(i, false); //多选全清空


      //日期重置
      this.dateStart='';
      this.dateEnd=$app.today(true);
      
      //重置排序 和付款状态
      this.$emit('initL');//调用父组件的方法

      this.$emit('pageTo1');
      this.$nextTick(() => {
        this.$emit('goFun');//调用父组件的方法
      });
    },
    //搜索 go
    goSs(){
      this.$emit('pageTo1');
      this.$nextTick(() => {
        this.$emit('goFun');//调用父组件的方法
      });
    },
    //日期改变后触发1
    ondStart(date){
      let {dateEnd}=this;
      let dEnd=(dateEnd.valueOf())/1000;

      //开始框有值
      dEnd=$app.formatTime(2,dEnd);
      if($app.vsTime(dEnd,date)){
        this.$Message.error({content:'开始时间必须小于结束时间'});
        this.dateStart='';
      }
      this.inputDd();
    },
    //日期改变后触发2
    ondEndJ(date){
      let {dateStart}=this;
      let dStart=(dateStart.valueOf())/1000;
      //开始框有值
      if($app.judgeData(dStart)){
        dStart=$app.formatTime(2,dStart);
        if($app.vsTime(date,dStart)){
          this.$Message.error({content:'结束时间必须大于开始时间'});
          this.dateEnd=$app.today(true);
        }
      }
      this.inputDd();

    },
    //选项卡按钮跟着变
    cY(i) {
      this.inp = ""; //文字清空

      this.iitmP(i, false); //多状态 渲染出来

      let initLi = [
        {
          key: "order_no",
          val: "订单编号"
        }
      ];

      if (i == 0){
        initLi = [
          ...initLi,
          {
            key: "goods_name",
            val: "商品名称"
          }
        ];
      }else if (i == 1) {
        initLi = [
          ...initLi,
          {
            key: "goods_name",
            val: "商品名称"
          },
          {
            key: "patent_number",
            val: "专利号"
          },
          {
            key: "patent_name",
            val: "专利名称"
          },
          {
            key: "patent_applicant",
            val: "申请人"
          }
        ];
      } else if (i == 2) {
        initLi = [
          ...initLi,
          {
            key: "tm_name",
            val: "商标名称"
          },
          {
            key: "tm_reg_people",
            val: "申请人"
          }
        ];
      } else if (i == 3) {
        initLi = [
          ...initLi,
          {
            key: "goods_name",
            val: "商品名称"
          },
          {
            key: "cp_name",
            val: "版权名称"
          },{
            key: "cp_reg_people",
            val: "申请人"
          }
        ];
      } else if (i == 5) {
        initLi = [
          ...initLi,
          {
            key: "report_tm_name",
            val: "商标名称"
          }
        ];
      };

      this.optS = initLi;

      //初始化
      if (i == 0) {
        this.optZ = initLi[0].key;
      }else if(i==5){
        this.optZ = initLi[1].key;
      } else {
        this.optZ = initLi[2].key;
      }
      
    }
  }
};
</script>

